<template>
  <div class="wrapper wrapper-full-page">
    <div class="full-page section-image login-page">
      <div class="content">
        <div class="container">
          <el-form ref="form" :model="ruleForm" class="login-form" :rules="rules">
            <el-form-item prop="accountNumber">
              <el-input v-model="ruleForm.accountNumber" prefix-icon="el-icon-user" placeholder="账号"></el-input>
            </el-form-item>

            <el-form-item prop="accountPassword">
              <el-input v-model="ruleForm.accountPassword" prefix-icon="el-icon-goods" placeholder="密码" type="password"></el-input>
            </el-form-item>

            <el-form-item style="margin-top:30px;">
              <el-button type="primary" @click="onSubmit" class="block login-btn" :loading="loading">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div class="full-page-background"></div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { login } from '@/api'
import { accessToken } from '@/env'
export default {
  data () {
    return {
      loading: false,
      ruleForm: {
        accountNumber: '',
        accountPassword: '',
        loginType: 1,
        uniqueIdentifier: Date.now().toString()
      },
      rules: {
        accountNumber: [{ required: true, message: '用户名不能为空' }],
        accountPassword: [{ required: true, message: '密码不能为空' }]
      }
    }
  },
  methods: {
    login () {
      return this.Catch(login, {
        onOk (res) {
          Vue.ls.set(accessToken, res.data.token)
          this.$router.push('/dashboard')
        }
      })('loading', this.ruleForm)
    },
    onSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.login()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.login-form {
  padding: 80px;
  padding-top: 140px;
  .login-btn {
    border-radius: 20px;
  }
  >>>.el-form-item__content {
    line-height: initial;
  }
  >>>.el-form-item__error {
    left: 20px;
  }
  >>> .el-input {
    border-radius: 24px;
    overflow: hidden;
    .el-input__inner {
      background-color: rgba(255, 255, 255, 0.1);
      color: rgb(255, 255, 255);
      border-width: 1px;
      border-style: solid;
      border-color: rgba(255, 255, 255, 0.5);
      height: initial;
      line-height: initial;
      padding: 12px 18px 12px 40px;
      font-size: 14px;
      border:none;
      transition: color .3s ease-in-out,border-color .3s ease-in-out,background-color .3s ease-in-out;
      &:focus {
         background-color: hsla(0,0%,100%,.2)
      }
    }
  }
}
.wrapper.wrapper-full-page {
  min-height: 100vh;
  height: auto;
  width: 100%;
}
.section-image {
  background-size: cover;
  background-position: 50%;
  position: relative;
  width: 100%;
}
.section-image::after {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  left: 0px;
  top: 0px;
  content: "";
  background-color: rgba(0, 0, 0, 0.7);
}
.full-page.section-image {
  position: static;
}
.full-page .full-page-background {
  background: url("~@/assets/loginbg.jpg");
}
.full-page .full-page-background,
.full-page:after {
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  display: block;
  top: 0;
  left: 0;
}
.full-page > .content {
  padding-top: 150px;
  z-index: 4;
  position: relative;
}
.section-image .container {
  z-index: 2;
  position: relative;
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
</style>
